<template>
  <div>
    <el-card
      class="payment"
      :body-style="{ padding: '0px' }"
    >
      <div class="info">
        <h3>支付订单标题</h3>
        <div>支付订单内容: 1024 元</div>
      </div>
      <div>扫码支付</div>
      <img :src="qrcode" />
    </el-card>
  </div>
</template>

<script>
// eslint-disable-next-line
const qrcode = 'https://qr.api.cli.im/qr?data=%25E8%25A5%25BF%25E7%2594%25B5%25E9%2593%25BE%25E7%259B%259F&level=H&transparent=false&bgcolor=%23ffffff&forecolor=%23000000&blockpixel=12&marginblock=1&logourl=&size=260&kid=cliim&key=4e03a10f0dc24a6d582ad88341489428';

export default {
  name: 'Payment',
  data() {
    return {
      qrcode,
    };
  },
};
</script>

<style scoped>
.el-card {
  width: 500px;
  margin: 50px auto;
  text-align: center;
  padding: 50px 0;
}

img {
  width: 250px;
}

.info {
  padding: 5px 10px;
  text-align: center;
  margin-bottom: 20px;
}

.info > div {
  margin: 5px 0;
}
</style>
